<template>
  <div class="shop-header">
    <!-- 背景图 -->
    <nav
      class="header-nav"
      :style="{ backgroundImage: `url(${info.bgImg})` }"
      v-if="info.bgImg"
    >
      <router-link class="nav-link" :to="{ path: '/miste' }">
        <i class="iconfont icon-fanhuijiantou1"></i>
      </router-link>
      <!-- 头像 -->
      <div class="nav-img">
        <img :src="info.avatar" alt="" />
      </div>
    </nav>
    <!-- ???? -->
    <div class="header-content">
      <!-- 标题 -->
      <h3 class="content-title" @click="toggleShopCard">
        <span class="title-brandnew">品牌</span>
        <span class="title-name">{{ info.name }}</span>
        <span class="title-icon"></span>
      </h3>
      <!-- 商家数据 -->
      <div class="content-detail">
        <span class="detail-rating">{{ info.serviceScore }}</span> &nbsp;
        <span class="detail-orders">月售{{ info.sellCount }}单</span> &nbsp;
        <span class="deatil-service">{{ info.description }}</span> &nbsp;
        <span class="detail-time">约{{ info.deliveryTime }}分钟</span> &nbsp;
        <span class="detail-distance">距离{{ info.distance }}</span>
      </div>
      <!-- 优惠 -->
      <div
        class="content-discount"
        v-if="info.supports"
        @click="toggleDiscountCard"
      >
        <span class="discount-logo">{{ info.supports[0].name }}</span>
        <span class="discount-detail">{{ info.supports[0].content }}</span>
        <span class="discount-num">{{ info.supports.length }}个优惠</span>
        <span class="discount-icon"></span>
      </div>
    </div>
    <!-- 显示商家详细信息 -->
    <van-dialog  @click="toggleShopCard" v-model="isShowShopCard" show-cancel-button>
        <transition name="fade">
        <div
            class="header-show-detail"
        >
            <div class="detail-card">
                <h3 class="card-title">
                    <span class="title-brandnew">品牌</span>
                    <span class="title-name">{{ info.name }}</span>
                </h3>
            <div class="card-item">
                <div class="item-cell">
                    <div>{{ info.serviceScore }}</div>
                    <span>评分</span>
                </div>
                <div class="item-cell">
                    <div>{{ info.sellCount }}</div>
                    <span>月售</span>
                </div>
                <div class="item-cell">
                    <div>{{ info.description }}</div>
                    <span>约{{ info.deliveryTime }}分钟</span>
                </div>
                <div class="item-cell">
                    <div>{{ info.deliveryPrice }}</div>
                    <span>配送费用</span>
                </div>
                <div class="item-cell">
                    <div>{{ info.distance }}</div>
                    <span>距离</span>
                </div>
            </div>
            <div class="card-notice">
                <span>公告</span>
                <p>{{ info.bulletin }}</p>
            </div>
            <div class="card-close" @click.stop="toggleShopCard"></div>
            </div>
        </div>
        </transition>
    </van-dialog>
    <!-- 显示优惠 -->
    <van-dialog  @click="toggleDiscountCard" v-model="isShowDiscountCard" show-cancel-button>
        <transition name="fade">
        <div
          class="header-show-discount"
        >
          <div class="discount-card">
            <h3 class="card-title">优惠活动</h3>
            <div class="card-content">
              <p
                class="content-item"
                v-for="(item, index) in info.supports"
                :key="index"
              >
                <span
                  class="discount-logo"
                  :style="{ backgroundColor: discountColor[item.type] }"
                  >{{ item.name }}</span
                >
                <span class="discount-detail">{{ item.content }}</span>
              </p>
            </div>
            <div class="card-close" @click.stop="toggleDiscountCard"></div>
          </div>
        </div>
        </transition>
    </van-dialog>
    
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'ShopHeader',
  computed: {
    ...mapState({
        info:state=>state.shop.info
    })
  },
  data() {
    return {
      isShowShopCard: false,
      isShowDiscountCard: false,
      discountColor: ['orange', 'red', 'yellowgreen']
    }
  },
  mounted() {
   
  
  },
  methods: {
    toggleShopCard() {
      this.isShowShopCard = !this.isShowShopCard
    },
    toggleDiscountCard() {
      this.isShowDiscountCard = !this.isShowDiscountCard
    }
  }
}
</script>

<style lang="less" scoped>
.shop-header{
    height: 150px;
    overflow: hidden;
    background-color: white;
    .header-nav{
        height: 60px;
        display: flex;
        justify-content: center;
        .iconfont{
            color: white;
            font-size: 30px;
            position: relative;
            left:  -106px;
            top: 10px;
        }
        img{
            width: 70px;
            height: 70px;
        }
        

    }
    .header-content{
        .content-title{
            text-align: center;
            margin: 10px 0;
            .title-brandnew{
                background-color: yellow;
                margin-right: 5px;
                font-size: 15px;
            }
            .title-icon{
                display: inline-block;
                width: 0;
                height: 0;
                border-top: 4px solid transparent;
                border-bottom: 4px solid transparent;
                border-left: 8px solid #333;
            }
            
        }
        .content-detail{
            text-align: center;
            font-size: 12px;
            margin-bottom: 4px;
        }
        .content-discount{
            text-align: center;
            font-size: 13px;
            .discount-logo{
                background-color: orange;
                color: white;
                margin-right: 4px;
            }
            .discount-icon{
                margin-left: 5px;
                display: inline-block;
                height: 0;
                width: 0;    
                border-right: 4px solid transparent;
                border-top: 8px solid #333;
                border-left: 4px solid transparent;
            }
        }

    }
    .detail-card{
        .card-title{
            margin-top: 20px;
            text-align: center;
            .title-brandnew{
                background-color: yellow;
            }
        }
        .card-item{
            display: flex;
            text-align: center;
            justify-content: space-around;
            .item-cell{
                margin-top: 5px;
                div{
                    color:black;
                }
                span{
                    font-size: 14px;
                }
            }
        }
        .card-notice{
           margin: 5px 0px;
           span{
               font-size: 14px;
               margin-bottom: 4px;
               display: flex;
               justify-content:center;
           }
           span::before{
               display: inline-block;
               content: '\ed67';
               font-family: "iconfont" ;
           }
           span::after{
               display: inline-block;
               content: '\ed67';
               font-family: "iconfont" ;
           }
           p{
               color: black;
               font-size: 14px;
           }
            
        }
       
  }  
  .card-title{
      text-align: center;
      margin: 10px 0;
  }    
    
    
}
</style>
